<template>
	<view class="content">
		<view class="wid90 mar foSi50 coFFF">欢迎加入乐优康</view>
		<view class="wid90 mar20 borRad20 bacFFF">
			<view v-if="group_id == 1" class="wid100">
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>企业名称：</view>
					<input style="width: 60%;" :value="ent_name" @input="entNameInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>法人姓名：</view>
					<input style="width: 60%;" :value="legal_name" @input="legalNameInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>手机号码：</view>
					<input style="width: 60%;" :value="mobile" @input="mobileInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>负责区域：</view>
					<picker mode="region" style="width: 60%;" @change="districtChange" :value="date">
						<view v-if="province">{{province+'-'+city+'-'+area}}</view>
						<view v-if="!province" class="wid100" style="height: 80rpx;"></view>
					</picker>
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;">银行卡名称：</view>
					<input style="width: 60%;" :value="bank_name" @input="bankNameInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;">银行卡号码：</view>
					<input style="width: 60%;" :value="bank_num" @input="bankNumInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;">开户行信息：</view>
					<input style="width: 60%;" :value="bank_info" @input="bankInfoInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80"><span style="color: #FF0000;">* </span>请上传资质照片：</view>
				<view class="wid90 mar dis disAl disJuB mar-top10">
					<view @click='upImage(0)'>
						<image v-if="!license" src="../../static/personalCenter/shangchuan.png" style="width: 176rpx;height: 176rpx;"></image>
						<image v-if="license" :src="url+license" class="borRad20" style="width: 176rpx;height: 176rpx;"></image>
						<view class="foSi25 textCen mar-top20">营业执照副本</view>
					</view>
					<view @click='upImage(1)'>
						<image v-if="!card_zheng" src="../../static/personalCenter/shangchuan.png" style="width: 176rpx;height: 176rpx;"></image>
						<image v-if="card_zheng" :src="url+card_zheng" class="borRad20" style="width: 176rpx;height: 176rpx;"></image>
						<view class="foSi25 textCen mar-top20">法人身份证正面</view>
					</view>
					<view @click='upImage(2)'>
						<image v-if="!card_fan" src="../../static/personalCenter/shangchuan.png" style="width: 176rpx;height: 176rpx;"></image>
						<image v-if="card_fan" :src="url+card_fan" class="borRad20" style="width: 176rpx;height: 176rpx;"></image>
						<view class="foSi25 textCen mar-top20">法人身份证反面</view>
					</view>
				</view>
			</view>
			<view v-if="group_id != 1" class="wid100">
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>成员姓名：</view>
					<input style="width: 60%;" :value="legal_name" @input="legalNameInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>手机号码：</view>
					<input style="width: 60%;" :value="mobile" @input="mobileInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>身份证号：</view>
					<input style="width: 60%;" :value="card_id" @input="cardIdInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;"><span style="color: #FF0000;">* </span>负责区域：</view>
					<picker mode="region" style="width: 60%;" @change="districtChange" :value="date">
						<view v-if="province">{{province+'-'+city+'-'+area}}</view>
						<view v-if="!province" class="wid100" style="height: 80rpx;"></view>
					</picker>
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;">银行卡号码：</view>
					<input style="width: 60%;" :value="bank_num" @input="bankNumInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80">
					<view style="width: 40%;">开户行信息：</view>
					<input style="width: 60%;" :value="bank_info" @input="bankInfoInput" />
				</view>
				<view class="xhx"></view>
				<view class="wid90 mar dis disAl hei80"><span style="color: #FF0000;">* </span>请上传资质照片：</view>
				<view class="wid90 mar dis disAl disJuB mar-top10">
					<view @click='upImage(3)'>
						<image v-if="!bank_img" src="../../static/personalCenter/shangchuan.png" style="width: 176rpx;height: 176rpx;"></image>
						<image v-if="bank_img" :src="url+bank_img" class="borRad20" style="width: 176rpx;height: 176rpx;"></image>
						<view class="foSi25 textCen mar-top20">银行卡照片</view>
					</view>
					<view @click='upImage(1)'>
						<image v-if="!card_zheng" src="../../static/personalCenter/shangchuan.png" style="width: 176rpx;height: 176rpx;"></image>
						<image v-if="card_zheng" :src="url+card_zheng" class="borRad20" style="width: 176rpx;height: 176rpx;"></image>
						<view class="foSi25 textCen mar-top20">法人身份证正面</view>
					</view>
					<view @click='upImage(2)'>
						<image v-if="!card_fan" src="../../static/personalCenter/shangchuan.png" style="width: 176rpx;height: 176rpx;"></image>
						<image v-if="card_fan" :src="url+card_fan" class="borRad20" style="width: 176rpx;height: 176rpx;"></image>
						<view class="foSi25 textCen mar-top20">法人身份证反面</view>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="wid80 mar hei80 borRad20 dis disAl disJuC foSi40 mar-top30 coFFF" 
				style="background-color: #1262DB;" @click="addEdit">提交</view>
			<view class="foSi25 textCen mar-top30" @click="callPhone">
				<view style="font-weight: 600;">商务热线</view>
				<view class="mar-top20" style="color: #797878;">{{tel}}</view>
			</view>
			<view class="foSi25 textCen mar-top30" @click="tiaozhuan('/pages/common/richtext?data='+agreement)">
				<view style="font-weight: 600;">相关合同</view>
				<view class="mar-top20" style="color: #797878;">《乐优康签订协议》</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				ent_name: '',
				legal_name: '',
				mobile: '',
				province: '',
				city: '',
				area: '',
				bank_name: '',
				bank_num: '',
				bank_info: '',
				card_id: '',
				bank_img: '',
				license: '',
				card_zheng: '',
				card_fan: '',
				tel: '',
				agreement: '',
				group_id: 1
			}
		},
		onLoad() {
			this.getuserinfo()
			this.gteAgreement()
		},
		methods: {
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			// 拨打电话
			callPhone() {
				var that = this
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: that.tel,
						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [that.tel],
						success: function(res) {
							console.log(res);
							uni.makePhoneCall({
								phoneNumber: that.tel,
							})
						}
					})
				}
			},
			gteAgreement(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/index/agreement',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.tel = result.data.tel
							that.agreement = result.data.agreement
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
				        }
				    }
				})
			},
			getuserinfo(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/user/getuserinfo',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.ent_name = result.data.ent_name
							that.legal_name = result.data.legal_name
							that.mobile = result.data.mobile
							that.province = result.data.province
							that.city = result.data.city
							that.area = result.data.area
							that.bank_name = result.data.bank_name
							that.bank_num = result.data.bank_num
							that.bank_info = result.data.bank_info
							that.card_id = result.data.card_id
							that.bank_img = result.data.bank_img
							that.license = result.data.license
							that.card_zheng = result.data.card_zheng
							that.card_fan = result.data.card_fan
							that.group_id = result.data.group_id
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
				        }
				    }
				})
			},
			addEdit(){
				var that = this
				var group_id = ''
				if(!that.legal_name){
					uni.showToast({
						title: '请输入法人姓名',
						icon: 'error'
					})
					return
				}
				let reg = /^[1][2,3,4,5,7,8,9][0-9]{9}$/      //正则表达式定义手机号正确格式
				if (!reg.test(this.mobile)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				console.log(that.province)
				if(!that.province){
					uni.showToast({
						title: '请输入负责区域',
						icon: 'error'
					})
					return
				}
				if(that.group_id == 1){
					if(!that.ent_name){
						uni.showToast({
							title: '请输入企业名称',
							icon: 'error'
						})
						return
					}
					if(!that.card_fan || !that.card_zheng || !that.license){
						uni.showToast({
							title: '请上传图片',
							icon: 'error'
						})
						return
					}
				}else{
					if(!that.card_id){
						uni.showToast({
							title: '请输入身份证号码',
							icon: 'error'
						})
						return
					}
					if(!that.card_fan || !that.card_zheng || !that.bank_img){
						uni.showToast({
							title: '请上传图片',
							icon: 'error'
						})
						return
					}
				}
				
				uni.request({
				    url: that.global.url + 'api/user/upuserinfo',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {
						ent_name: this.ent_name,
						legal_name: this.legal_name,
						mobile: this.mobile,
						province: this.province,
						city: this.city,
						area: this.area,
						bank_name: this.bank_name,
						bank_num: this.bank_num,
						bank_info: this.bank_info,
						card_id: this.card_id,
						license: this.license,
						bank_img: this.bank_img,
						card_zheng: this.card_zheng,
						card_fan: this.card_fan,
					},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							uni.navigateBack({delta: 1})
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
				        }
				    }
				})
			},
			entNameInput: function(e){
				this.ent_name = e.target.value
			},
			legalNameInput: function(e){
				this.legal_name = e.target.value
			},
			mobileInput: function(e){
				this.mobile = e.target.value
			},
			bankNameInput: function(e){
				this.bank_name = e.target.value
			},
			bankNumInput: function(e){
				this.bank_num = e.target.value
			},
			bankInfoInput: function(e){
				this.bank_info = e.target.value
			},
			cardIdInput: function(e){
				this.card_id = e.target.value
			},
			districtChange(e){
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.area = e.detail.value[2];
			},
			upImage(index){
				var that = this
				uni.chooseImage({
				    count: 1, //上传图片的数量，默认是9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        const tempFilePaths = res.tempFilePaths;    //拿到选择的图片，是一个数组
						that.shangchuan(tempFilePaths,index)
				    }
				});
			},
			shangchuan(tempFilePaths,index){
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/common/upload',
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							if(index == 0){
								that.license = apiresult.data.url
							}else if(index == 1){
								that.card_zheng = apiresult.data.url
							}else if(index == 3){
								that.bank_img = apiresult.data.url
							}else{
								that.card_fan = apiresult.data.url
							}
							
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error'
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error'
						})
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #1262DB;
	}

</style>
